<template>
  <div class="ag-top">
    <div class="ag-title">众包平台</div>
    <div class="ag-info">
      <span class="icon icon-admin"></span>
      <p class="username">{{userName}}</p>
      <span class="icon icon-exit" @click="exit"></span>
    </div>
  </div>
</template>

<script setup>
import utils from 'utils/index';
import { ref, onMounted } from 'vue';
import { useRouter } from "vue-router";
  const router = useRouter()
  const userName = ref('admin')
  const exit = () => {
    router.push({path: '/login'})
  }
  onMounted (() => {
    userName.value = utils.getStorage('username') || 'admin'
  })
</script>

<style lang="scss">
.ag-top {
  width: 100vw;
  height: 60px;
  background-color: #0b4549;
  display: flex;
  position: relative;
  .ag-title {
    display: flex;
    width: 200px;
    height: 60px;
    background-color: #819c6d;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: 'Adobe Heiti Std';
    font-weight: bold;
    color: #fff;
  }
  .ag-tab {
    width: calc(100vw - 824px);
    height: 60px;
    margin: 0 auto;
    .tab-list {
      display: flex;
      align-items: center;
      height: 100%;
      .tab-item {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .icon {
          display: inline-block;
          width: 20px;
          height: 20px;
          &.icon-home {
            background: url('@/assets/base/icon-home.png') no-repeat 0 0;
          }
          &.icon-home-a {
            background: url('@/assets/base/icon-home-a.png') no-repeat 0 0;
          }
          &.icon-count {
            background: url('@/assets/base/icon-count.png') no-repeat 0 0;
          }
          &.icon-count-a {
            background: url('@/assets/base/icon-count-a.png') no-repeat 0 0;
          }
          &.icon-village {
            background: url('@/assets/base/icon-village.png') no-repeat 0 0;
          }
          &.icon-village-a {
            background: url('@/assets/base/icon-village-a.png') no-repeat 0 0;
          }
          &.icon-exponent {
            background: url('@/assets/base/icon-exponent.png') no-repeat 0 0;
          }
          &.icon-exponent-a {
            background: url('@/assets/base/icon-exponent-a.png') no-repeat 0 0;
          }
          &.icon-ai {
            background: url('@/assets/base/icon-ai.png') no-repeat 0 0;
          }
          &.icon-ai-a {
            background: url('@/assets/base/icon-ai-a.png') no-repeat 0 0;
          }
          background-size: 100% !important;
        }
        .text {
          margin-left: 6px;
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #DFF3E4;
        }
        &.active {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 7px;
            margin-left: -60px;
            width: 120px;
            height: 2px;
            background: #07D5C0;
          }
          .text {
            color: #30FFEA;
          }
        }
      }
    }
  }
  .ag-info {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    width: 140px;
    height: 60px;
    .username {
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #DFEEF3;
      margin: 0 14px;
    }
    .icon {
      width: 26px;
      height: 26px;
      &.icon-admin {
        background: url('https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png') no-repeat 0 0;
        background-size: 100%;
      }
      &.icon-exit {
        background: url('@/assets/base/icon-exit.png') no-repeat 0 0;
        background-size: 100%;
        width: 20px;
        height: 20px;
        margin-right: 14px;
        cursor: pointer;
      }
    }
  }
}
  
</style>